import React from 'react';
import { Modal, Button, Form, Input, InputNumber, Select } from 'antd';
import styles from './index.less';

const Item = Form.Item;
const Option = Select.Option;
const TextArea = Input.TextArea;

@Form.create()
class Components extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  /**
   * 提交表单到父组件
   */
  onOk = () => {
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        values.serverPort = values.serverPort.join(',');
        values.whiteList = values.whiteList.join(',');
        this.props.submit(values);
      }
    });
  };
  clear = () => {
    this.props.form.resetFields();
  };

  render() {
    const {
      visible,
      formatData,
      close,
      list,
      backupList,
      form: { getFieldDecorator },
    } = this.props;

      

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      },
    };
    return (
      <Modal
        title="设备管理"
        afterClose={this.clear}
        visible={visible}
        onCancel={close}
        okText="确定"
        cancelText="取消"
        onOk={this.onOk}
      >
        <div className={styles.formWrap}>
          <Form>
            <Item {...formItemLayout} label="设备名称">
              {getFieldDecorator('deviceName', {
                rules: [{ required: true, message: '不能为空' }],
                initialValue: formatData && formatData.deviceName,
              })(<Input />)}
            </Item>
            <Item {...formItemLayout} label="所属设备组">
              {getFieldDecorator('groupId', {
                rules: [{ required: true, message: '不能为空' }],
                initialValue: formatData && formatData.groupId,
              })(
                <Select>
                  {list.map(item => (
                    <Option value={item.id} key={item.id}>
                      {item.groupName}
                    </Option>
                  ))}
                </Select>
              )}
            </Item>

            <Item {...formItemLayout} label="设备IP">
              {getFieldDecorator('deviceIp', {
                rules: [{ required: true, message: '不能为空' }],
                initialValue: formatData && formatData.deviceIp,
              })(<Input />)}
            </Item>
            <Item {...formItemLayout} label="服务端口">
              {getFieldDecorator('serverPort', {
                rules: [{ required: true, message: '不能为空' }],
                initialValue: formatData ? formatData.serverPort.split(',') : [],
              })(
                <Select mode="tags" style={{ width: '100%' }} tokenSeparators={[',']}>
                  {[].map(item => (
                    <Option value={item.id} key={item.id}>
                      {item.id}
                    </Option>
                  ))}
                </Select>
              )}
            </Item>
            <Item {...formItemLayout} label="备份服务器">
              {getFieldDecorator('backServerId', {
                // rules: [{ required: true, message: '不能为空' }],
                initialValue: formatData && formatData.backServerId,
              })(
                <Select>
                  {backupList.map(item => (
                    <Option value={item.id} key={item.id}>
                      {item.serverIp}
                    </Option>
                  ))}
                </Select>
              )}
            </Item>
            <Item {...formItemLayout} label="用户名">
              {getFieldDecorator('userName', {
                rules: [{ required: true, message: '不能为空' }],
                initialValue: formatData && formatData.userName,
              })(<Input />)}
            </Item>
            <Item {...formItemLayout} label="密码">
              {getFieldDecorator('password', {
                rules: [{ required: true, message: '不能为空' }],
                initialValue: formatData && formatData.password,
              })(<Input type="password" />)}
            </Item>
            <Item {...formItemLayout} label="IP白名单">
              {getFieldDecorator('whiteList', {
                initialValue: (formatData && formatData.whiteList) ? formatData.whiteList.split(',') : [],
              })(
                <Select
                  placeholder="可输入多个IP"
                  mode="tags"
                  style={{ width: '100%' }}
                  tokenSeparators={[',']}
                >
                  {[].map(item => (
                    <Option value={item} key={item}>
                      {item}
                    </Option>
                  ))}
                </Select>
              )}
            </Item>
            <Item {...formItemLayout} label="设备位置">
              {getFieldDecorator('location', {
                initialValue: formatData && formatData.location,
              })(<Input style={{ width: '100%' }} />)}
            </Item>
            <Item {...formItemLayout} label="备注">
              {getFieldDecorator('remark', {
                initialValue: formatData && formatData.remark,
              })(<Input />)}
            </Item>
          </Form>
        </div>
      </Modal>
    );
  }
}

export default Components;
